<template>
    <div class="list-container">
        <div class="summary-box" :style="{ background: props.data?.background }">
            <img class="icon" :src="props.data?.icon" alt="" />
            <div class="desc-box">
                <div class="title">{{ props.data?.name || "" }}</div>
                <div class="data">{{ data?.total || 0 }}</div>
            </div>
        </div>
        <div class="list-box">
            <Search @search="keywordSearch" v-model="keyword" :palceholder="props.palceholder" />

            <div class="data-list" :id="props.data?.scrollId">
                <div v-if="isEmpty" class="no-content-box">
                    <NoContent :content="isEmptyContent" />
                </div>
                <InfiniteScroll
                    @load="handleSearch"
                    :loading="loading"
                    :finish="finish"
                    :isEmpty="isEmpty"
                    :distance="300"
                    :scrollId="props.data?.scrollId"
                    class="infinite-scroll-box"
                    v-else
                >
                    <ul>
                        <li
                            v-for="(item, index) in list"
                            :key="item.id"
                            @click="openDetail(props.data?.detailUrl, item)"
                        >
                            <div class="num">{{ tableIndex(index) }}</div>
                            <div class="right-data" @click="">
                                <span class="name">{{ item?.name || "" }}</span>
                                <span class="arrow-icon"
                                    ><el-icon><ArrowRightBold /></el-icon
                                ></span>
                            </div>
                        </li>
                    </ul>
                </InfiniteScroll>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import Search from "../../components/Search.vue";
import { ArrowRightBold } from "@element-plus/icons-vue";
import { SCMessage, SCMessageBox } from "@sribd/sc-ui/lib";
import { IShareParm, IShareList } from "../../api/aiSpace";
import InfiniteScroll from "../../components/InfiniteScroll.vue";
import NoContent from "../../components/NoContent.vue";
import { useRouter } from "vue-router";

const data = ref<IShareList>();
const list = reactive<any[]>([]);
const props = defineProps(["data", "palceholder"]);
const loading = ref(false);
const keyword = ref("");

const currentPage = ref(1);
const total = ref(0);
const isEmpty = ref(false);
const isEmptyContent = ref("暂无数据");
const finish = ref(false);
const pageSize = 30;
const router = useRouter();
const tableIndex = (index) => {
    return (currentPage.value - 2) * pageSize + index + 1;
};
const handleSearch = async () => {
    loading.value = true;
    finish.value = false;
    const parm = ref<IShareParm>({
        isShare: props.data?.isShare,
        name: keyword.value,
        page: currentPage.value,
        pageSize: pageSize, // -1 是全部
    });

    try {
        data.value = await props.data?.func(parm.value);
        const dtoList =
            data.value?.algorithmDtoList ||
            data.value?.dataSetDtoList ||
            data.value?.modelDtoList ||
            [];
        if (dtoList?.length > 0) {
            list.push(...dtoList);
            currentPage.value++;
        }
        total.value = data.value?.total || 0;
        isEmpty.value = total.value === 0;
        // isEmptyContent.value = "暂无数据";
        if (list.length >= total.value) {
            finish.value = true;
        }
    } catch (error) {
        SCMessage({ message: error.msg || "获取列表失败", type: "error" });
        finish.value = true;
        isEmpty.value = true;
        isEmptyContent.value = error.msg || "获取列表失败";
    } finally {
        loading.value = false;
    }
};

watch(
    [props.data, keyword],
    () => {
        currentPage.value = 1;
        list.length = 0;
        handleSearch();
    },
    {
        deep: true,
    },
);

const openDetail = (detailUrl, row) => {
    router.push(detailUrl + row.id);
};

const keywordSearch = async () => {
    currentPage.value = 1;
    list.length = 0;
    await handleSearch();
};
</script>

<style lang="scss" scoped>
.list-container {
    width: 100%;
    min-width: 310px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .summary-box {
        width: 100%;
        height: 124px;
        // background: url(/src/assets/svg/quadrilateral.svg) center no-repeat;
        // background-size: 100% 100%;
        background: #f2ebff;
        border-radius: 62px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 54px;
        padding-right: 100px;
        box-sizing: border-box;
        img {
            width: 124px;
            height: 128px;
        }
        .desc-box {
            .title {
                font-size: 16px;
                color: #1b181b;
                line-height: 16px;
                text-align: justify;
                font-style: normal;
            }
            .data {
                margin-top: 8px;
                font-weight: 500;
                font-size: 40px;
                color: #1b181b;
                line-height: 40px;
                text-align: justify;
                font-style: normal;
            }
        }
        .icon {
            margin-top: -30px;
        }
    }
    .list-box {
        margin-top: 20px;
        width: 100%;
        height: calc(100vh - 290px);
        min-height: 300px;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #dadcdf;
        box-sizing: border-box;
        padding: 20px 20px 20px;
        :deep(.keyword) {
            width: 100%;
            .el-input__inner {
                width: 100% !important;
                font-size: 14px;
                &::placeholder {
                    color: rgba(27, 24, 27, 0.7);
                }
            }
            .el-input__wrapper {
                background: #f4f4f8;
                .el-icon {
                    width: 16px;
                    height: 20px;
                    color: rgba(27, 24, 27, 0.7);
                }
            }
        }
        .data-list {
            margin-top: 20px;
            height: calc(100vh - 290px - 96px);
            min-height: 210px;
            overflow-y: auto;
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                background: #ffffff;
                box-shadow: inset 0px -1px 0px 0px #e5e6eb;
                font-size: 14px;
                color: #1b181b;
                cursor: pointer;
                .num {
                    padding-left: 10px;
                    // width: 50px;
                }
                .right-data {
                    width: calc(100% - 40px);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 20px;
                    box-sizing: border-box;
                    .arrow-icon {
                        height: 14px;
                        display: inline-block;
                        .el-icon {
                            // font-size: 14px;
                            color: rgba(27, 24, 27, 0.5);
                        }
                    }
                    .name {
                        display: inline-block;
                        overflow: hidden; //超出的文本隐藏
                        text-overflow: ellipsis; //溢出用省略号显示
                        white-space: nowrap; //溢出不换行
                    }
                }
            }
        }
    }
}

@media (max-width: 1366px) {
    .summary-box {
        padding-left: 30px !important;
        padding-right: 60px !important;
    }
}
</style>
